Implement a Skip Link Component

There is repeated content in the header of every page of the CampSpots app.

When a keyboard user navigates, they will have to Tab through the menu in order to move down to the main content of the page. Of course, this isn’t as bad as having to Tab through all of the non-visible menu items like we saw previously but it still doesn’t provide a great experience.

Skip links to the rescue!

Not only are skip links useful for keyboard access, they are also a requirement in WCAG Success Criterion 2.4.1, Bypass Blocks (Level A).

They are commonly used to “Skip to Main Content” to bypass repeated navigation and occasionally for “Back to Top” on a long page. They can also be a useful pattern for non-modal dialogs or other designs where it would be nice to jump around the page by keyboard.

A skip link itself can point to an ID attribute on a container element, such as <a href="#main"> pointing to <main id="main">.

Skip links should be visible to all keyboard users, i.e. not visually-hidden for screen reader use only as was once commonplace in the past.

🛠 Challenge: Add a Skip Link

Your challenge is to add a skip link to the CampSpots app that allows a keyboard user to skip past the header and straight to the main content of the page.

Looking at our App.js file, we can get an idea of the structure of the CampSpots application.

There’s a <Header/> component that will be at the top no matter what. This makes it a good candidate for where the skip link component should live.

Below the Header is a main landmark with an id of main, which gives us a target for our internal skip link.

A SkipLinks component has already been started at components/skip-links.js. It’s got a basic style sheet already created and is ready for you to write markup. Add the SkipLinks component to the Header.

The skip link should point to the main landmark and should not be visible until the user hits the Tab key. Hint: Revisit the visibility techniques from the previous lesson!

If you want to peek at the answer, check out the files in the exercise1-the-keyboard directory of the repo.

🛠 Solution: Adding a Skip Link

Implementing the SkipLinks Component

For the SkipLinks component, it would be good to have it support more than one link in case there are multiple places we want the user to reach.

When I know the component I’m creating needs to be versatile, I like to have it take in child elements.

With this in mind, I’m going to return an unordered list. It will render the children that get passed in: one or more <li>s with appropriate links inside. The children prop can be destructured directly from the component parameters.

Since the baseline CSS has already been written, I’ll add the className of skip-links to the <ul>.

Here’s what my code for the SkipLinks component looks like:

const SkipLinks = ({children}) => {
    return (
        <ul className="skip-links">
            {children}
        </ul>
    )
}

const SkipLinks = ({children}) => {
    return (
        <ul className="skip-links">
            {children}
        </ul>
    )
}

Adding the SkipLink Component to the Header

Over in the Header component at components/header.js, the SkipLinks component needs to be imported:

import SkipLinks from "components/skip-links"

import SkipLinks from "components/skip-links"

We want our skip link to show before anything else, so we’ll add it above the div with the id of header-nav.

Because the SkipLink's markup takes in children and React’s JSX also supports regular HTML elements, we can put the li elements with links in between <SkipLink> opening and closing tags to be rendered.

Here’s what it looks like:

const Header = () => {
    return (
        <header id="header">
            <SkipLinks>
                <li><a href="#main">Skip to Main Content</a></li>
            </SkipLinks>
						<div id="header-nav">
					...

const Header = () => {
    return (
        <header id="header">
            <SkipLinks>
                <li><a href="#main">Skip to Main Content</a></li>
            </SkipLinks>
						<div id="header-nav">
					...

When we go back to the browser and refresh, our new skip link component is displayed!

However, we don’t want the links to display until the user hits the Tab key.

Update CSS so the Skip Link is Hidden by Default

The SkipLinks component is first in the tab order which is the desired behavior. But it should only be displayed when it’s focused.

The CSS needs to be updated to implement the hiding behavior, so I’ll open up skip-links.scss to add some rules.

There are a few options for which technique to choose.

I think that the skip link should be rendered in the accessibility tree so that it will be readable and functional to screen readers regardless if it can be visually seen on the screen.

I’m going to use the opacity technique, since it’s not shown visually but is still rendered.

Inside the style declarations for the li, I’ll add opacity: 0; which will hide it visually by default.

li a {
  background-color: var(--color-accent-secondary);
  color: var(--color-primary-light);
  font-weight: bold;
  opacity: 0;
	...

li a {
  background-color: var(--color-accent-secondary);
  color: var(--color-primary-light);
  font-weight: bold;
  opacity: 0;
	...

When we refresh the page, we can no longer see our skip links even though the Accessibility Tree shows it being rendered:

Now we need to fix it so that a skip link appears when we Tab to it.

Back in skip-links.scss, I’ll add a rule for the focus pseudo-class that will set the opacity value to 1 when the link has focus. Because this project uses Sass, I can save some typing for the focus rule by using &:focus.

Here’s what the link styles look like now:

li a {
  background-color: var(--color-accent-secondary);
  color: var(--color-primary-light);
  font-weight: bold;
  opacity: 0;
  padding: 0.5em;
  position: absolute;
  text-decoration: none;
  z-index: 1;

  &:focus {
      opacity: 1;
  }
}

li a {
  background-color: var(--color-accent-secondary);
  color: var(--color-primary-light);
  font-weight: bold;
  opacity: 0;
  padding: 0.5em;
  position: absolute;
  text-decoration: none;
  z-index: 1;

  &:focus {
      opacity: 1;
  }
}

Back in the browser, the skip link is shown when it has focus and is visually hidden when it doesn’t!

Further Consideration

There are some considerations to make for both the visual style of the skip link and its placement, particularly when looking at smaller viewport sizes. However, functionally we have something that works and suits our purposes for now.

🛠 Challenge: Add a “Back to Top” Link to the Footer

Following a similar process to what I did above, add an instance of the SkipLinks component to the footer that allows the user to jump back to the top of the page.

📼 Solution: Adding “Back to Top” to the Footer

Inside of App.js, we need to import the SkipLinks component at the top of the file.

At the bottom of the file in the footer section, we’ll add an instance of the SkipLinks component with a child link and an href that points to the id of header. The text will say “Skip to Top”.

Here’s what the markup looks like:

// inside of App.js
<footer id="footer">
  <SkipLinks variant="footer">
    <li><a href="#header">Skip to Top</a></li>
  </SkipLinks>
  <div className="layout">
    <div id="footer-logo">
      <img src={imgFooterLogo} alt="CampSpots" />
    </div>
  </div>
</footer>

// inside of App.js
<footer id="footer">
  <SkipLinks variant="footer">
    <li><a href="#header">Skip to Top</a></li>
  </SkipLinks>
  <div className="layout">
    <div id="footer-logo">
      <img src={imgFooterLogo} alt="CampSpots" />
    </div>
  </div>
</footer>

We could take this further and update the SkipLinks component to allow for different style variants by applying CSS classes as strings.

Over in the skip-links.js file, we’ll add support for a variant prop to be passed in. The default will be set to “header”.

Then we’ll update the ul's className to use a string template and have it interpolate the value of the variant prop.

Here’s what the updated SkipLinks component looks like:

const SkipLinks = ({children, variant = 'header'}) => {
  return (
    <ul className={`skip-links ${variant}`}>
      {children}
    </ul>
  )
}

const SkipLinks = ({children, variant = 'header'}) => {
  return (
    <ul className={`skip-links ${variant}`}>
      {children}
    </ul>
  )
}

From there, customization would be a matter of adding styles for the variants in your stylesheet.

Wrapping Up Skip Links

There are multiple ways to build skip links but the functionality should be the same.

We want something that’s in the tab order that becomes visible to sighted keyboard users and screen reader users alike. A link should move the user’s focus point to another part of the page when activated.

Using our CSS visibility techniques allows us to render our skip links, make them visible on focus, and read them aloud in a screen reader.

📝 Exercise: Add Skip Links to Your Own Project

For more practice with Skip Links, add them to your own project!

Share a blog post about what visibility technique you used and how you decided where to add them in your code.